<template>
  <a-dropdown placement="bottomRight">
    <span class="ant-pro-account-avatar">
      <!--   <a-avatar size="small" src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" class="antd-pro-global-header-index-avatar" /> -->
      <span>
        <a-icon v-if="loading" type="loading" :style="{ fontSize: '20px', color: '#08c' }"/>
        <a-icon v-else type="dribbble" :style="{ fontSize: '20px', color: '#fff' }"/>
      </span>
    </span>
    <template v-slot:overlay>
      <a-menu class="ant-pro-drop-down menu" :selected-keys="[]" v-for="site in sites" :key="site.id">
        <a-menu-item  @click="handleChangeSite(site)"  v-for="site in sites" :key="site.id">
          <a-menu-item v-if="sites.length>0">
            <a-icon type="check-circle" v-if="site.isDefault" />
            <a-icon type="stop" v-else />
            <span style="color: green;" v-if="site.isDefault">{{ site.site }}
              <a-icon type="home" />
              <a @click.stop="viewSite(site)">查看站点</a>
            </span>
            <span v-else>{{ site.site }}
              <a-icon type="home" />
              <a @click.stop="viewSite(site)">查看站点</a>
            </span>
          </a-menu-item>
          <a-menu-item v-if="sites.length===0">
            <a-icon type="stop" />
            <span>暂无分配站点</span>
          </a-menu-item>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<script>
  import { Modal } from 'ant-design-vue'
  export default {
    name: 'SiteDropdown',
    components: {},
    props: {},
    data () {
      return {
        sites: [],
        loading: true
      }
    },
    created () {
      const _this = this
      setTimeout(() => {
         _this.getSites()
      }, 1500)
    },
    watch: {
       sites (val, old) {
          this.loading = false
       }
    },
    methods: {
      handleChangeSite (site) {
        Modal.confirm({
          title: '设置确认',
          content: '确认设置' + site.site + '为默认站点？',
          onOk: () => {
            return this.$store.dispatch('SetDefaultSite', site).then(() => {
              this.$router.push({
                path: '/'
              })
              window.location.reload()
            })
          },
          onCancel () {}
        })
      },
      viewSite (site) {
        let domain = site.domain
        if (!domain.startsWith('http://') && !domain.startsWith('https://')) {
          domain = 'http://' + domain
        }
        window.open(domain)
      },
      getSites () {
        this.sites = this.$store.getters.sites
      }
    }
  }
</script>

<style lang="less" scoped>
  .ant-pro-drop-down {
    /deep/ .action {
      margin-right: 8px;
    }

    /deep/ .ant-dropdown-menu-item {
      min-width: 160px;
    }
  }
</style>
